<template>
    <el-form class="form-box" ref="loginRef" :model="form" size="large">
        <el-form-item
            label=""
            prop="phone"
            :rules="[
                {
                    required: true,
                    message: '请输入手机号!'
                },
                {
                    pattern: phoneReg,
                    message: '请输入正确手机号'
                }
            ]"
        >
            <el-input :prefix-icon="Iphone" placeholder="请输入手机号" :maxlength="11" v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label=""
            prop="phoneCode"
            :rules="[
                {
                    required: true,
                    message: '请输入验证码!'
                }
            ]"
        >
            <div class="grid-box">
                <div><el-input :prefix-icon="Message" placeholder="请输入验证码" :maxlength="6" v-model="form.phoneCode" autocomplete="off"></el-input></div>
                <div><GetCodeBtn></GetCodeBtn></div>
            </div>
        </el-form-item>

        <el-button class="full-box tw-h-[40px]" type="primary" :loading="btnLoading" @click="submitForm(loginRef)">登录</el-button>
    </el-form>
</template>

<script setup>
import { Iphone, Message } from '@element-plus/icons-vue'
import GetCodeBtn from '@/components/GetCodeBtn/index.vue'
import { phoneReg } from '@/utils/formValidate'
const emits = defineEmits(['login'])
const router = useRouter()
const btnLoading = ref(false)
const formDataRef = {
    phone: '',
    phoneCode: ''
}
const form = reactive(formDataRef)
const loginRef = ref(null)

const submitForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            btnLoading.value = true
            emits('login', form)
        } else {
            console.log('error submit!')
            return false
        }
    })
}
</script>
<style scoped lang="scss">
.form-box {
    margin-top: 30px;
    padding: 0px;
}
.grid-box {
    width: 100%;
    display: grid;
    grid-template-columns: auto fit-content(110px);
    column-gap: 20px;
}
</style>
